<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Plot</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="system/styles/igrX.css" />
    <!--[if lte IE 7]>
    <link rel="stylesheet" media="screen, print" href="system/styles/plot.compat.css" />
    <![endif]-->
</head>
<body>
    <div class='trend' id='placeholder' style='top:0;left:0;min-width:1000px'></div>
</body>
<script type="text/javascript" src="system/scripts/igrX.js"></script>
<script type="text/javascript">

//the list of json files that keep all the pen data
var url = [
	'pen/pen_temperature.json',
	'pen/pen_pressure.json',
	'pen/pen_weight.json',
	'pen/pen_miscellaneous.json'
];

var opt = {
    'length': 600, //in seconds
    'skip': true,
    'lograte': 5000,
    'title': 'Temperature',
    'backgroundColor': 'white',
    'refLineColor': 'black',
    'lineWidth': 2,
	'maxPen': 25, // can either be number OR array of colours 
	'jsonURL':true //indicate whether the pen_setting parsed in is json URL
};

var plot = igrx.trend( '#placeholder', {
    'pen_setting': url, //can either be pen object OR array of json URL
    'option': opt
});

</script>
</html>